---
title: Vite 또는 Rollup 플러그인 설치
description: 프로젝트에 Rollup 플러그인을 추가하여 YAML 데이터를 가져오는 방법을 알아보세요.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Astro는 Vite를 기반으로 구축되었으며 Vite 및 Rollup 플러그인을 모두 지원합니다. 이 레시피는 Rollup 플러그인을 사용하여 Astro에서 YAML (`.yml`) 파일을 가져오는 기능을 추가합니다.

## 레시피

1. `@rollup/plugin-yaml`을 설치합니다.

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. `astro.config.mjs` 파일에서 플러그인을 가져와 Vite 플러그인 배열에 추가합니다.

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```


3. 마지막으로 `import` 문을 사용하여 YAML 데이터를 가져올 수 있습니다.

    ```js
    import yml from './data.yml';
    ```

    :::note
    이제 Astro 프로젝트에서 YAML 데이터를 가져올 수 있지만 편집기는 가져온 데이터에 대한 타입을 제공하지 않습니다. 타입을 추가하려면 프로젝트의 `src` 디렉터리에서 기존 `*.d.ts` 파일을 만들거나 찾아서 다음을 추가하세요.
    ```ts title="src/files.d.ts"
    // 가져올 파일 확장자를 지정하세요.
    declare module "*.yml" {
      const value: any; // 원하는 경우 여기에 타입 정의를 추가하세요.
      export default value;
    }
    ```
    이렇게 하면 편집기에서 YAML 데이터에 대한 타입 힌트를 제공할 수 있습니다.
    :::
